<template>
    <div
      class="scroll-box"
      ref="scrollBox"
      @mouseover="stopAni"
      @mouseout.capture="startAni"
      @mouseup="mouseup"
      @mousedown="mousedown"
    >
      <div
        class="scroll-body"
        :style="{ 'pointer-events': pointEvent }"
        ref="scrollBody"
      >
        <slot></slot>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      close: {
        type: Boolean,
        default: false
      },
      pointEvent: {
        type: String,
        default: 'none'
      }
    },
    data() {
      return {
        reflashTimer: 0,
        timer: 0,
        timer1: 0,
        timer2: 0,
        timer3: 0,
        mousedownFlag: false
      }
    },
    mounted() {
      if (this.close) return
      this.$nextTick(() => {
        this.stopAni()
        this.startAni()
      })
    },
    methods: {
      stopAni() {
        clearInterval(this.timer)
      },
      startAni(e) {
        if (this.mousedownFlag || this.close) return
        clearTimeout(this.reflashTimer)
        if (!e || e.target === e.currentTarget) {
          setTimeout(() => {
            this.openAnimate()
          }, 3000)
        } else {
          this.reflashTimer = setTimeout(() => {
            this.openAnimate()
          }, 3000)
        }
      },
      openAnimate() {
        let tBox = this.$refs.scrollBox
        let tBody = this.$refs.scrollBody
        if (!tBody) return
        let scrollTop = tBox.scrollTop
        let maxScrollTop = tBody.offsetHeight - tBox.clientHeight
        this.stopAni()
        this.timer = setInterval(() => {
          if (this.mousedownFlag) return
          scrollTop += 0.1
          tBox.scrollTop = scrollTop
          if (scrollTop > maxScrollTop) {
            this.stopAni()
            clearTimeout(this.timer2)
            clearTimeout(this.timer3)
            this.timer2 = setTimeout(() => {
              tBox.scrollTop = 0
            }, 4000)
            this.timer3 = setTimeout(this.openAnimate, 8000)
          }
        }, 4)
      },
      mousedown(e) {
        this.mousedownFlag = true
        this.stopAni()
      },
      mouseup(e) {
        this.mousedownFlag = false
        this.startAni()
      }
    },
    beforeDestroy() {
      this.stopAni()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .scroll-box {
    height: 100%;
    overflow-y: auto;
  }
  .scroll-body {
    pointer-events: none;
  }
  .scroll-box::-webkit-scrollbar-thumb,
  .scroll-box::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .scroll-box:hover::-webkit-scrollbar {
    &-thumb {
      //滑块部分
      background-color: hsla(0, 0%, 53%, 0.4);
    }
    &-track {
      //轨道部分
      background: hsla(0, 0%, 53%, 0.2);
    }
  }
  </style>
  